<template>
  <dialog_item :dialogTitle="$t('appconfig_add')" @onBtnDialogClick="onBtnDialogClick" :visible.sync="detailVisible" :isShowConfirmBtn="true">
    <search_item :searchItemArr="searchItemArr" @searchItemData="searchItemData"/>
    <div>
      <el-table 
      class="Trpointer"
      stripe
      :data="customApps.datas" 
      @selection-change="onSelectionChange" 
      style="width: 100%" 
      header-cell-class-name="tableHeaderbg"
      size="small">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" :label="$t('software_name')" width="180"></el-table-column>
        <el-table-column prop="description" :label="$t('description')" width="180"></el-table-column>
        <el-table-column :label="$t('fettle')">
          <template slot-scope="scope">{{scope.row.activated? $t('active') : $t('inactive')}}</template>
        </el-table-column>
      </el-table>
    </div>
    </dialog_item>
</template>

<script>
export default {
  props: ["visible"],
  created() {
    this.getData()
    this.searchItemArr=[{type:'input',name:'name',placeholder:this.$t('software_name')}]
  },
  data() {
    return {
      searchdata: {
        domainid: this.$route.query.domainid,
        data:{
          name: "",
        }
      },  
      customApps: {},
      multipleSelection: [],
      searchItemArr:[]
    };
  },
  computed: {
    detailVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    onBtnDialogClick(name){
      if(name=='confirm'){
        this.onOk()
      }else if(name=='cancel'){
        this.onCancel()
      }
    },
    searchItemData(val){
     this.searchdata={
        ...this.searchdata,
        data:{
            ...val
        }
      }
      this.getData();
    },
    onOk() {
      // bindApps
      let ids = [];
      this.multipleSelection.forEach(row => {
        ids.push(row.id);
      });
      this.$api.bindCustomApps(
        { domainid: this.$route.query.domainid, data: ids },
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              this.$message({
                showClose: true,
                message: this.$t('msg_add_success'),
                type: "success"
              });
              this.$emit("refresh");
              this.$emit("update:visible", false);
            } else {
              this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "error"
              });
            }
          }
        }
      );
    },
    onCancel() {
      this.$emit("update:visible", false);
    },
    getData(){
      this.$api.getUnbindApps(
        this.searchdata,
        {
          onSucess: resp => {
            let response=resp.data.data,temp=[]
            response.datas.forEach(item=>{
              if(item.type!=2){
                temp.push(item)
              }
            })
            this.customApps = resp.data.data;
            this.customApps.datas=temp
          }
        }
      );
    },
    onSelectionChange(rows) {
      this.multipleSelection = rows;
    }
  }
};
</script>

<style>
</style>